<template>
  <div id="navs">
    <div class="nav-comtent flex_space_btween">
      <div class="left flex_start">
        <router-link to="/" tag="div" class="logo flex_start">
          <div class="images flex_center">
            <img src="./img/logont.png" alt="" />
          </div>
          <p>网易云音乐</p>
        </router-link>
        <div class="locationbtns flex_space_btween">
          <div class="back flex_center" @click="goBack">
            <img src="./img/back.png" alt="" />
          </div>
          <div class="forward flex_center">
            <img src="./img/forward.png" alt="" @click="goForward" />
          </div>
        </div>
        <div class="search flex_start">
          <div class="icon" @click.stop="saveHistory">
            <img src="./img/search.png" alt="" />
          </div>
          <input
            type="text"
            placeholder="搜索"
            v-model="searchValues"
            @keyup.13="saveHistory"
            @focus="inputFocus"
            @blur="inputBlur"
            @input="searchUpdate"
          />
          <div class="search-box" v-show="searchShow === true">
            <div class="history-search" v-show="historyShow === true">
              <div class="history-hd">
                <div class="left">
                  搜索历史<i class="el-icon-delete" @click="clearHistory"></i>
                </div>
                <div class="right">查看全部</div>
              </div>
              <ul class="history-content">
                <li
                  v-for="(item, index) in searchArr"
                  :key="index"
                  @click="searchGet(item)"
                >
                  {{ item }}
                </li>
              </ul>
              <p class="hot-search">热搜榜</p>
              <ul class="hot-list">
                <li v-for="(item, index) in hotSearch" :key="index">
                  <span class="num" :class="{ active: index < 3 }">{{
                    index + 1
                  }}</span>
                  <div class="right">
                    <p class="names" :class="{ active: index < 3 }">
                      {{ item.searchWord
                      }}<span class="score">{{ item.score }}</span>
                    </p>
                    <p class="desc nowrap">{{ item.content }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="input-update" v-show="inputUpShow === true">
              <p class="hd-title">
                搜索"<span>{{ searchValues }}</span
                >"相关结果<i class="el-icon-arrow-right"></i>
              </p>
              <div class="singer-se">
                <p class="title"><i class="el-icon-user"></i>歌手</p>
                <li
                  v-for="(item, index) in searchSuggest && searchSuggest.artists
                    ? searchSuggest.artists
                    : 0"
                  :key="index"
                  @click="skipSingerDetail(item)"
                >
                  {{ item.name }}
                </li>
              </div>
              <div class="album">
                <p class="title"><i class="el-icon-video-camera"></i>专辑</p>
                <li
                  v-for="(item, index) in searchSuggest && searchSuggest.albums
                    ? searchSuggest.albums
                    : 0"
                  :key="index"
                  @click="skipList(item)"
                >
                  {{ item.name }}
                </li>
              </div>
            </div>
          </div>
        </div>
        <div class="listen flex_center">
          <img src="./img/record.png" alt="" />
        </div>
      </div>
      <div class="right flex_start">
        <div class="login flex_start el-dropdown-link" @click="qrLoginAlert">
          <div class="icon-user"><img :src="avatar" alt="" /></div>
          <p class="name">{{ nickName }}</p>
          <div class="down"><img src="./img/down.png" alt="" /></div>
        </div>
        <div
          class="user-message"
          v-show="usermessage"
          @mouseleave="usermessage = false"
        >
          <div class="dynamic">
            <ul>
              <li>
                <p>{{ dnnum }}</p>
                <p>动态</p>
              </li>
              <li>
                <p>{{ attention }}</p>
                <p>关注</p>
              </li>
              <li>
                <p>{{ fans }}</p>
                <p>粉丝</p>
              </li>
            </ul>
            <div class="sign-in">
              <div class="icons">
                <img src="../../assets/images/singin.png" alt="" />
              </div>
              签到
            </div>
          </div>
          <el-divider></el-divider>
          <ul class="item">
            <li>
              <div class="left">
                <div class="icons">
                  <img src="../../assets/images/netVip.png" alt="" />
                </div>
                <span>会员中心</span>
              </div>
              <div class="rightitem">
                <span v-show="vipType === 0">未订购</span>
                <span v-show="vipType !== 0">VIP</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </li>
            <li>
              <div class="left">
                <div class="icons">
                  <img src="../../assets/images/level.png" alt="" />
                </div>
                <span>等级</span>
              </div>
              <div class="rightitem">
                <span>lv.{{ level }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </li>
            <li>
              <div class="left">
                <div class="icons">
                  <img src="../../assets/images/shop.png" alt="" />
                </div>
                <span>商城</span>
              </div>
              <div class="rightitem">
                <i class="el-icon-arrow-right"></i>
              </div>
            </li>
            <el-divider></el-divider>
            <li>
              <div class="left">
                <div class="icons">
                  <img src="../../assets/images/person.png" alt="" />
                </div>
                <span>个人信息设置</span>
              </div>
              <div class="rightitem">
                <i class="el-icon-arrow-right"></i>
              </div>
            </li>
            <li>
              <div class="left">
                <div class="icons">
                  <img src="../../assets/images/bind.png" alt="" />
                </div>
                <span>绑定社交账号</span>
              </div>
              <div class="rightitem">
                <i class="el-icon-arrow-right"></i>
              </div>
            </li>
            <el-divider></el-divider>
            <li @click="loginOut">
              <div class="left">
                <div class="icons">
                  <img src="../../assets/images/exit.png" alt="" />
                </div>
                <span>退出登录</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="login">
      <div class="scanQR">
        <el-dialog
          :visible.sync="centerDialogVisible"
          width="20%"
          center
          top="185px"
          :close-on-click-modal="false"
          :modal="false"
        >
          <el-row type="flex" justify="center">
            <div class="main">
              <p class="QR-title">扫码登录</p>
              <div class="QR-images">
                <img src="" alt="" />
              </div>
              <p>
                使用<a href="https://music.163.com/#/download" target="_blank"
                  >网易云音乐APP</a
                >扫码登录
              </p>
            </div>
          </el-row>

          <div slot="footer" class="dialog-footer">
            <p @click="other">选择其他登录方式 ></p>
          </div>
        </el-dialog>
        <el-dialog
          :visible.sync="centerDialogVisibleOther"
          width="20%"
          center
          top="185px"
          :close-on-click-modal="false"
          :modal="false"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="扫码登录更安全"
            placement="right"
          >
            <div class="QR-hd" @click.stop="skipQR">
              <img src="../../assets/images/QRhd.png" alt="" /></div
          ></el-tooltip>
          <el-row type="flex" justify="center">
            <div class="main">
              <div class="phone-bk">
                <img src="../../assets/images/phonebk.png" alt="" />
              </div>
              <form action="" class="phone-form">
                <label for="" class="flex_start">
                  <div class="area flex_start">
                    <img src="../../assets/images/phone.png" alt="" />
                    <el-select v-model="addr" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <el-divider direction="vertical"></el-divider>
                  </div>
                  <div class="phone-num">
                    <input
                      type="text"
                      placeholder="请输入手机号"
                      class="inphone"
                      v-model="phone"
                    />
                  </div>
                </label>
                <label for="" class="flex_start">
                  <img src="../../assets/images/pwd.png" alt="" />
                  <div class="phone-num">
                    <input
                      type="password"
                      placeholder="请输入密码"
                      class="pwd"
                      v-model="pwd"
                      @keydown.13="phoneLogin"
                    />
                  </div>
                </label>
              </form>
              <el-checkbox v-model="atuologin">自动登录</el-checkbox>
              <div class="btns flex_center" @click="phoneLogin">登录</div>
              <p class="register" :plain="true" @click="sRegister">注册</p>
              <div class="other-login">
                <ul>
                  <li class="wechat">
                    <img src="../../assets/images/wechat.png" alt="" />
                  </li>
                  <li class="qq">
                    <img src="../../assets/images/qq.png" alt="" />
                  </li>
                  <li><img src="../../assets/images/weibo.png" alt="" /></li>
                  <li @click="sEmail">易</li>
                </ul>
              </div>
            </div>
          </el-row>

          <div slot="footer" class="dialog-footer other-footer">
            <el-checkbox v-model="checked"
              >同意
              <a
                href="https://st.music.163.com/official-terms/service"
                target="_blank"
                >《服务条款》</a
              >
              <a
                href="https://st.music.163.com/official-terms/privacy"
                target="_blank"
                >《隐私政策》</a
              >
              <a
                href="https://st.music.163.com/official-terms/children"
                target="_blank"
                >《儿童隐私政策》</a
              >
            </el-checkbox>
          </div>
        </el-dialog>

        <el-dialog
          :visible.sync="register"
          width="20%"
          center
          top="185px"
          :close-on-click-modal="false"
          :modal="false"
        >
          <div class="QR-hd register-back" @click.stop="sRegisterBack">
            <i class="el-icon-arrow-left"></i>返回登录
          </div>
          <el-row type="flex" justify="center">
            <div class="main">
              <div class="phone-bk">
                <img src="../../assets/images/phonebk.png" alt="" />
              </div>
              <form action="" class="phone-form">
                <label for="" class="flex_start">
                  <div class="area flex_start">
                    <img src="../../assets/images/phone.png" alt="" />
                    <el-select v-model="addr" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <el-divider direction="vertical"></el-divider>
                  </div>
                  <div class="phone-num">
                    <input
                      type="text"
                      placeholder="请输入手机号"
                      class="inphone"
                      v-model="rePhone"
                    />
                  </div>
                </label>
                <label for="" class="flex_start">
                  <img src="../../assets/images/pwd.png" alt="" />
                  <div class="phone-num">
                    <input
                      type="password"
                      placeholder="设置登录密码"
                      class="pwd"
                      v-model="rePwd"
                    />
                  </div>
                </label>
              </form>

              <div class="btns flex_center">注册</div>
              <el-divider content-position="center">其他注册方式</el-divider>
              <div class="other-login">
                <ul>
                  <li class="wechat">
                    <img src="../../assets/images/wechat.png" alt="" />
                  </li>
                  <li class="qq">
                    <img src="../../assets/images/qq.png" alt="" />
                  </li>
                  <li><img src="../../assets/images/weibo.png" alt="" /></li>
                  <li @click="sEmail">易</li>
                </ul>
              </div>
            </div>
          </el-row>
        </el-dialog>

        <el-dialog
          :visible.sync="emailLogin"
          width="20%"
          center
          top="185px"
          :close-on-click-modal="false"
          :modal="false"
        >
          <div class="QR-hd register-back" @click.stop="sEmailBack">
            <i class="el-icon-arrow-left"></i>返回其他登录
          </div>
          <el-row type="flex" justify="center">
            <div class="main">
              <div class="phone-bk">
                <img src="../../assets/images/emailbk.png" alt="" />
              </div>
              <form action="" class="phone-form">
                <label for="" class="flex_start">
                  <div class="area flex_start">
                    <img src="../../assets/images/email.png" alt="" />
                  </div>
                  <div class="phone-num">
                    <input
                      type="text"
                      placeholder="邮箱账号"
                      class="inphone"
                      v-model="emailIn"
                    />
                  </div>
                </label>
                <label for="" class="flex_start">
                  <img src="../../assets/images/pwd.png" alt="" />
                  <div class="phone-num">
                    <input
                      type="password"
                      placeholder="密码"
                      class="pwd emlogin"
                      v-model="emailPwd"
                      @keydown.13="emlogins"
                    />
                  </div>
                </label>
              </form>
              <el-checkbox v-model="atuologinEm">自动登录</el-checkbox>
              <div @click="emlogins" class="btns flex_center emlogin">登录</div>
            </div>
          </el-row>
        </el-dialog>
      </div>
      <div class="otherMethod"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navs",
  data() {
    return {
      //搜索值
      searchValues: "",
      searchArr: [],
      //热搜
      hotSearch: [],
      searchShow: false,
      historyShow: false,
      inputUpShow: false,
      //搜索结果
      searchSuggest: [],
      //用户数据
      avatar: require("./img/user.png"),
      nickName: "未登录",
      level: "",
      dnnum: 0,
      attention: 0,
      fans: 0,
      usermessage: false,
      vipType: 0,

      centerDialogVisible: false,
      centerDialogVisibleOther: false,
      //是否自动登录
      atuologin: false,
      atuologinEm: false,
      checked: false,
      //注册页面的显示
      register: false,
      //邮箱页面
      emailLogin: false,
      phone: "",
      pwd: "",
      rePhone: "",
      rePwd: "",
      emailIn: "",
      emailPwd: "",
      //地区
      addr: "+86",
      //用户信息
      uesrMsg: {},
      options: [
        {
          value: "中国",
          label: "+86",
        },
        {
          value: "中国香港",
          label: "+852",
        },
      ],
    };
  },
  methods: {
     //跳转详情页
    skipSingerDetail(item){
      this.$router.push({
        path:"/homepage/contents/singerDetail",
        query:{
          id:item.id
        }
      })
      location.reload()
    },
    //跳转至歌单列表
    skipList(item) {
      this.$router.push({
        path: "/homepage/contents/rankdetail",
        query: {
          detail: item,
          id: item.id,
        },
      });
      //  //搜索建议
      // this.axios({
      //   withCredentials: true,
      //   method: "get",
      //   url:
      //     "https://music.hzbiz.net/album?timetamp=" +
      //     new Date().getTime(),
      //   params: {
      //     id: item.id,
      //   },
      // }).then((res) => {
      //   // this.searchSuggest = res.data.result;
      //   console.log("专辑", res.data);
      // });
    },
    //聚焦判断
    inputFocus() {
       this.searchShow = true;
      if (this.searchValues === "") {
        this.historyShow = true;
      }else{
        this.inputUpShow=true
      }
    },
    //失焦消失
    inputBlur() {
      setTimeout(() => {
        this.searchShow = false;
      }, 200);
    },
    //实时跟新搜索
    searchUpdate() {
      if (this.searchValues === "") {
        this.historyShow = true;
        this.inputUpShow = false;
      } else {
        this.historyShow = false;
        this.inputUpShow = true;
      }
      //搜索建议
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/search/suggest?timetamp=" +
          new Date().getTime(),
        params: {
          keywords: this.searchValues,
        },
      }).then((res) => {
        this.searchSuggest = res.data.result;
        console.log("搜索建议", res.data);
      });
    },
    //点击记录搜索框的值
    searchGet(item) {
      this.searchValues = item;
    },
    //清空搜索历史
    clearHistory() {
      this.searchArr = [];
      localStorage.clear("searchHistory");
    },
    //搜索记录储存
    saveHistory() {
      this.searchArr.push(this.searchValues);
      //数组去重
      let mapSearchArr = new Set(this.searchArr);
      this.searchArr = [...mapSearchArr];
      localStorage.searchHistory = JSON.stringify(this.searchArr);
      setTimeout(()=>{
        this.$router.push({
        path:"/homepage/contents/searchmatch",
        query:{keywords:this.searchValues}
      })
      },0)
    },
    goBack() {
      window.history.back();
    },
    goForward() {
      window.history.forward();
    },
    //是否弹窗
    qrLoginAlert() {
      if (this.uesrMsg.profile) {
        if (this.usermessage === false) {
          this.usermessage = true;
        } else {
          this.usermessage = false;
        }
      } else {
        this.centerDialogVisible = true;
      }
    },
    other() {
      this.centerDialogVisible = false;
      this.centerDialogVisibleOther = true;
    },
    skipQR() {
      this.centerDialogVisible = true;
      this.centerDialogVisibleOther = false;
    },
    //到注册页面
    sRegister() {
      if (this.checked) {
        this.centerDialogVisibleOther = false;
        this.register = true;
      } else {
        this.$message({
          message: "请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》",
          type: "warning",
        });
      }
    },
    sRegisterBack() {
      this.centerDialogVisibleOther = true;
      this.register = false;
    },
    sEmail() {
      if (this.checked) {
        this.centerDialogVisibleOther = false;
        this.emailLogin = true;
      } else {
        this.$message({
          message: "请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》",
          type: "warning",
        });
      }
    },
    sEmailBack() {
      this.centerDialogVisibleOther = true;
      this.emailLogin = false;
    },
    //邮箱登录
    emlogins() {
      this.axios({
        withCredentials: true,
        method: "get",
        url: "https://music.hzbiz.net/login?timetamp=" + new Date().getTime(),
        params: {
          email: this.emailIn,
          password: this.emailPwd,
        },
      }).then((res) => {
        console.log(res.data);
        //用户个人歌单
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/user/playlist?timetamp=" +
            new Date().getTime(),
          params: {
            uid: res.data.account.id,
          },
        }).then((res) => {
          console.log(res.data.playlist);
          this.$store.commit("savePersonalPlaylist", res.data.playlist);
          if (this.atuologin) {
            localStorage.userPlaylist = JSON.stringify(res.data.playlist);
          } else {
            localStorage.removeItem("userPlaylist");
          }
        });

        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/user/detail?timetamp=" +
            new Date().getTime(),
          params: {
            uid: res.data.account.id,
          },
        }).then((res) => {
          this.uesrMsg = res.data;
          if (this.atuologinEm) {
            localStorage.userMsg = JSON.stringify(this.uesrMsg);
          } else {
            localStorage.removeItem("userMsg");
          }
          console.log(res.data);
          this.emailLogin = false;
        });
      });
    },
    //手机登录
    phoneLogin() {
      if (this.checked) {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/login/cellphone?timetamp=" +
            new Date().getTime(),
          params: {
            phone: this.phone,
            password: this.pwd,
          },
        }).then((res) => {
          console.log(res.data);
          //用户个人歌单
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/user/playlist?timetamp=" +
              new Date().getTime(),
            params: {
              uid: res.data.account.id,
            },
          }).then((res) => {
            console.log(res.data.playlist);
            this.$store.commit("savePersonalPlaylist", res.data.playlist);
            if (this.atuologin) {
              localStorage.userPlaylist = JSON.stringify(res.data.playlist);
            } else {
              localStorage.removeItem("userPlaylist");
            }
          });
          //用户详情
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/user/detail?timetamp=" +
              new Date().getTime(),
            params: {
              uid: res.data.account.id,
            },
          }).then((res) => {
            this.uesrMsg = res.data;
            if (this.atuologin) {
              localStorage.userMsg = JSON.stringify(this.uesrMsg);
            } else {
              localStorage.removeItem("userMsg");
            }
            console.log(res.data);
            this.centerDialogVisibleOther = false;
          });
        });
      } else {
        this.$message({
          message: "请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》",
          type: "warning",
        });
      }
    },
    loginOut() {
      if (localStorage.userMsg) {
        localStorage.removeItem("userMsg");
      }
      if (localStorage.userPlaylist) {
        localStorage.removeItem("userPlaylist");
      }
      location.reload();
    },
  },
  created() {
    //热搜请求
    this.axios({
      withCredentials: true,
      method: "get",
      url:
        "https://music.hzbiz.net/search/hot/detail?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      this.hotSearch = res.data.data;
      console.log("热搜", res.data);
    });
    //搜索历史渲染
    if (localStorage.searchHistory) {
      this.searchArr = JSON.parse(localStorage.searchHistory);
    }
    //用户信息
    if (localStorage.userMsg) {
      this.uesrMsg = JSON.parse(localStorage.userMsg);
      this.avatar = this.uesrMsg.profile.avatarUrl;
      this.nickName = this.uesrMsg.profile.nickname;
      this.dnnum = this.uesrMsg.profile.eventCount;
      this.attention = this.uesrMsg.profile.follows;
      this.fans = this.uesrMsg.profile.followeds;
      this.level = this.uesrMsg.level;
      this.vipType = this.uesrMsg.profile.vipType;
    }
    //个人歌单收藏
    if (localStorage.userPlaylist) {
      this.$store.commit(
        "savePersonalPlaylist",
        JSON.parse(localStorage.userPlaylist)
      );
    }
  },
  updated() {
    //用户信息
    if (this.uesrMsg.profile) {
      this.avatar = this.uesrMsg.profile.avatarUrl;
      this.nickName = this.uesrMsg.profile.nickname;
      this.dnnum = this.uesrMsg.profile.eventCount;
      this.attention = this.uesrMsg.profile.follows;
      this.fans = this.uesrMsg.profile.followeds;
      this.level = this.uesrMsg.level;
      this.vipType = this.uesrMsg.profile.vipType;
    }
    //二维码登录
    if (this.centerDialogVisible === true) {
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/login/qr/key?timetamp=" +
          new Date().getTime(),
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/login/qr/create?qrimg&timetamp=" +
            new Date().getTime(),
          params: {
            key: res.data.data.unikey,
            // qrimg:"",
          },
        }).then((res) => {
          console.log(res.data);
        });
      });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav-comtent {
  width: 100%;
  background-color: #ec4141;
  height: 58px;
  padding: 0 15px;
  box-sizing: border-box;
}
.logo {
  cursor: pointer;
}
.logo p {
  color: #ffffff;
  font-size: 20px;
  margin-left: 5px;
}
.logo .images {
  width: 28px;
  height: 28px;
  overflow: hidden;
}
.logo .images img {
  width: 100%;
}
.locationbtns {
  margin-left: 100px;
}
.locationbtns .back,
.locationbtns .forward {
  width: 23px;
  height: 23px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #d83b3b;
  margin-right: 5px;
  cursor: pointer;
}
.locationbtns img {
  width: 100%;
}
.search {
  width: 130px;
  height: 30px;
  background-color: #d83b3b;
  border-radius: 15px;
  padding-left: 15px;
  position: relative;
}
.search .icon {
  width: 16px;
  height: 16px;
  overflow: hidden;
  cursor: pointer;
}
.search .icon img {
  width: 100%;
}
.search input {
  background-color: #d83b3b;
  width: 80px;
  color: #f5f5f5f5;
  margin-left: 10px;
}
.search .search-box {
  position: absolute;
  top: 33px;
  left: -30px;
  width: 350px;
  max-height: 450px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  z-index: 5;
  padding: 17px 0;
  border-radius: 5px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
}
.search .search-box::-webkit-scrollbar{
  border: rgba(0, 0, 0, 0.1);
  width: 5px;
}
.search .search-box::-webkit-scrollbar-thumb {
  background-color: #d4d3d3f5;
  border-radius: 5px;
}
.search .search-box .history-hd {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding: 0 17px;
}
.search-box .history-hd .left > i {
  margin-left: 5px;
  cursor: pointer;
}
.search-box .history-hd .left > i:hover {
  color: #000;
}
.search-box .history-hd .right {
  cursor: pointer;
}
.search .search-box .hot-search {
  margin: 15px 0;
  padding: 0 17px;
}
.search-box .history-hd .right:hover {
  color: #000;
}
.search-box .history-content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0 17px;
}
.search-box .history-content li {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 25px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.search-box .history-content li:hover {
  background-color: #f5f5f5f5;
}
.search-box .hot-list li {
  display: flex;
  align-items: center;
  color: #999999;
  padding: 8px 17px;
  cursor: pointer;
}
.search-box .hot-list li:hover {
  background-color: #f5f5f5f5;
}
.search-box .hot-list li span.num {
  width: 18px;
  font-size: 16px;
}
.search-box .hot-list li span.num.active {
  color: rgb(248, 33, 33);
}
.search-box .hot-list li p.names {
  color: rgb(63, 63, 63);
}
.search-box .hot-list li p.active {
  color: #000;
  font-weight: bold;
}
.search-box .hot-list li span.score {
  margin-left: 10px;
  font-size: 12px;
  color: #c0bfbf;
}
.search-box .hot-list li .right {
  margin-left: 15px;
}
.search-box .hot-list li .desc {
  font-size: 12px;
  margin-top: 5px;
}
.search-box .input-update {
  margin-bottom: 160px;
}
.search-box .input-update p.title {
  background-color: #f5f5f5f5;
  padding: 3px 10px;
}
.search-box .input-update i {
  margin-right: 5px;
}
.search-box .input-update li {
  padding: 5px 30px;
  cursor: pointer;
}
.search-box .input-update li:hover {
  background-color: #f5f5f5f5;
}
.search-box .input-update .hd-title {
  padding: 5px 10px;
  cursor: pointer;
}
.search-box .input-update .hd-title > span {
  color: rgba(107, 107, 224, 0.877);
}
.listen {
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-color: #d83b3b;
  border-radius: 50%;
  margin-left: 15px;
}
.listen img {
  width: 55%;
}
.icon-user {
  width: 28px;
  height: 28px;
  overflow: hidden;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-right: 15px;
}
.icon-user img {
  width: 100%;
}
.nav-comtent > .right {
  margin-right: 40px;
}
.nav-comtent > .right .login {
  cursor: pointer;
}
.right .name {
  color: #fbd9d9;
}
.nav-comtent > .right .name:hover {
  color: #ffffff;
}
.nav-comtent > .right .down {
  width: 11px;
  height: 11px;
  overflow: hidden;
  margin-left: 10px;
}
.nav-comtent > .right .down img {
  width: 100%;
}
.login .dialog-footer {
  cursor: pointer;
}
.login .main .QR-title {
  color: #000;
  font-size: 30px;
  text-align: center;
  margin-bottom: 25px;
}
.login .main .QR-images {
  width: 180px;
  height: 180px;
  overflow: hidden;
  margin: 0 auto;
}
.login .main > p {
  margin-top: 15px;
  text-align: center;
}
.login .dialog-footer {
  margin-bottom: 50px;
}
.login .other-footer {
  font-size: 12px;
}
.login .QR-hd {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 6px;
  top: 6px;
  cursor: pointer;
  z-index: 99;
}
.login .QR-hd.register-back {
  width: 100px;
}
.login .main .phone-bk {
  height: 108px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 40px;
}

label img {
  width: 20px;
  margin-right: 5px;
}
.phone-form {
  width: 260px;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.login label {
  padding: 8px 5px;
}
.login label:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.login .inphone {
  margin-left: 10px;
  width: 90%;
}
.login .pwd {
  margin-left: 10px;
}
.login .btns {
  width: 260px;
  height: 40px;
  margin-bottom: 20px;
  background-color: #e22018;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  letter-spacing: 5px;
  cursor: pointer;
}
.login .btns:hover {
  background-color: #c21a15;
}
.login .register {
  cursor: pointer;
  text-decoration: underline;
}
.login .other-login {
  margin-top: 20px;
}
.login .other-login ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login .other-login li {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #db5952;
}
.login .other-login li.wechat img {
  width: 75%;
}
.login .other-login li.qq img {
  width: 60%;
}
.login .other-login li:hover {
  background-color: #f5f5f5f5;
}
.user-message {
  position: absolute;
  top: 57px;
  right: 10px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  width: 280px;
  z-index: 999;
}
.user-message .dynamic {
  margin-top: 35px;
}
.user-message .dynamic ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 0 35px;
}
.user-message .dynamic ul li p:first-child {
  font-size: 22px;
  font-weight: bold;
  color: #000;
}
.user-message .dynamic ul li p:last-child {
  font-size: 12px;
}
.user-message .dynamic .sign-in {
  margin: 0 auto;
  width: 84px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
}
.user-message .dynamic .sign-in:hover {
  background-color: #f5f5f5f5;
}
.user-message .icons {
  width: 23px;
  height: 22px;
  overflow: hidden;
  margin-right: 10px;
}
.user-message .item li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px 0 20px;
  cursor: pointer;
}
.user-message .item li:hover {
  background-color: #f5f5f5f5;
}
.user-message .item .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
<style>
.login .other-footer .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ec4141;
  border-color: #ec4141;
}
.login .other-footer .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666666;
}
.login .el-input__inner {
  border: none;
  padding: 0;
  width: 60px;
  height: 24px;
  line-height: 24px;
}
.login .el-input__icon {
  line-height: 24px;
}
.login .el-divider--vertical {
  position: absolute;
  height: 41px;
  left: 115px;
}
.user-message .el-divider--horizontal {
  margin: 0;
}
.el-menu-vertical-demo .el-submenu__title {
  padding: 0;
  padding-left: 10px !important;
  height: 38px;
  line-height: 38px;
  color: #a6a6a6;
}
.el-menu-vertical-demo {
  border: none;
}
.el-menu-vertical-demo .el-menu-item {
  padding: 0;
  padding-left: 10px !important;
}
.el-menu-vertical-demo .el-menu-item span {
  margin-left: 10px;
}
</style>
